<template>
  <div class="search_again">
    <div class="again_form">
      <div class="again_form_radio">
        <el-radio-group v-model="radio">
          <el-radio :label="1">按航班查询</el-radio>
          <el-radio :label="2">按起降地查询</el-radio>
        </el-radio-group>
      </div>
      <div class="again_form_form">
        <!-- 航班号查询 -->
        <FlightQuery v-if="radio==1"/>
        <!-- 起始地查询 -->
        <TotalQuery v-if="radio==2" @again_onSubmit="again_onSubmit"/>
      </div>
    </div>
  </div>
  <router-view />
</template>

<script setup>
import TotalQuery from '../query/TotalQuery.vue';
import FlightQuery from '../query/FlightQuery2.vue';
import { ref, getCurrentInstance,watch} from "vue";
import { useRouter, useRoute } from "vue-router";

//路由
const router = useRouter();
const route = useRoute();

var loading = ref(true);
const radio = ref(1);
watch(route,(newValue,oldValue)=>{
  if(route.path == '/index/flightdynamic/list'){
    radio.value = 2
  }else{
    radio.value = 1
  }
},{immediate:true})

const again_onSubmit = (searchAgain) => {
    router.push({
      path: "/index/flightdynamic/list",
      query: {
        upCity: searchAgain.upCity,
        downCity: searchAgain.downCity,
        upDate: searchAgain.upDate,
      },
    })
}

</script>

<style scoped>
.search_again {
  height: 60px;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.again_form {
  width: 100%;
  justify-content: center; /* 子元素水平居中 */
  align-items: center;
  display: flex;
}
.again_form_radio {
  margin-left: 35px;
  width: 240px;
}
.again_form_form {
  margin-top: 10px;
}
</style>